<template>
  <div>
    <div class="logo">
      <img src="@/assets/img/l-login.png"/>
    </div>
    <div class="main">
      <div style="font-size: 24px; font-weight: 600; margin-bottom: 20px">
        登录
      </div>
      <div>
        <input
          type="text"
          placeholder="请输入手机号"
          class="in-one"
          v-model.trim="phone"
        />
      </div>
      <div>
        <input
          type="text"
          placeholder="请输入密码"
          class="in-two"
          v-model.trim="password"
        />
        <router-link target="_blank" :to="{ path: '/forget' }" class="two-right"
          >忘记密码</router-link
        >
      </div>
    </div>
    <div class="bottom">
      <button class="btn-one" @click="login">登录</button>
      <button class="btn-two" @click="regi">注册</button>
    </div>
  </div>
</template>


<script lang="ts" setup>
import { gethttp } from "../../utils/request";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
import { showFailToast, showSuccessToast } from "vant";


const router = useRouter();
// 初始数据
const phone = ref("");
const password = ref("");
//路由引入
const login = () => {
  gethttp("/api/login",'get', {
    phone: phone.value,
    password: password.value
  }).then((res:any) => {
    if (res.status == 200) {
      console.log(res);
      localStorage.setItem("token", res.token);
      router.push("/");
      showToast("登录成功");
    } else {
      showFailToast("登录失败");
    }
  });
};
// 注冊
const regi = () => {
  router.push({ path: "/register" });
};
</script>


<style scoped lang="less">
.logo img {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 80px;
  width: 300px;
  height: 300px;
}

.main {
  width: 80%;
  text-align: left;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.in-one {
  width: 100%;
  border: none;
  font-size: 26px;
  padding: 10px 0px;
  border-bottom: 1px solid rgb(188, 188, 191);
}

.in-two {
  margin-top: 28px;
  width: 100%;
  border: none;
  font-size: 26px;
  padding: 10px 0px;
  border-bottom: 1px solid rgb(188, 188, 191);
  position: relative;
}

.two-right {
  position: absolute;
  right: 0;
  top: 188px;
  text-decoration: none;
  color: black;
}

.bottom {
  margin-top: 850px;
  margin-left: 10%;
}

.btn-one {
  width: 90%;
  color: white;
  background-color: #00a299;
  padding: 10px 10px;
  border-radius: 20px;
  border: none;
}

.btn-two {
  margin-top: 20px;
  width: 90%;
  color: black;
  background-color: white;
  padding: 10px 10px;
  border-radius: 20px;
  border: 1px solid rgba(141, 139, 139, 0.5);
}
</style>